<template>
	<div
	class="div-editable"
	contenteditable="true"
	v-html="innerText"
	:placeholder="placeholder"
	@input="changeText"
	@focus="focus"
	@blur="blurFun"
	></div>
</template>

<script>
// 自定义方法
import { backToTopNow } from '_commonFn/animate'
import { getText, delHtmlStyle } from '_commonFn/string'

export default {
	name: "DivEditable",
	props: {
		value: {
			type: String,
			default: ""
		},
		placeholder: {
			type: String,
			default: ""
		},
	},
	data() {
		return {
			innerText: this.value,
			isChange: true,
			changeValue: '',
		}
	},
	watch: {
		value() {
			if (this.isChange) {
				this.innerText = this.value;
			}
		}
	},
	methods: {
		changeText() {
			// console.log('this.$el.innerText', this.$el.innerText)
			// console.log('text', getText(this.$el.innerText))
			if (this.$el.innerText) {
				if (getText(this.$el.innerText) === '') {
					document.getElementsByClassName('div-editable')[0].innerHTML = ''
					this.$emit("input", '')
				} else {
					this.$emit("input", delHtmlStyle(this.$el.innerHTML))
				}
			} else {
				this.changeValue = ''	
			}
		},
		focus() {
			this.isChange = false
		},
		blurFun() {
			// console.log('blurFun')
			this.isChange = true
			// console.log('isIos', this.$store.state.browser.isIos)
			if (this.$store.state.browser.isIos) {
				backToTopNow()
			}
			this.$emit("blurFunc")
		}
	}
};
</script>

<style lang="scss" scoped>
.div-editable {
	width: 100%;
    height: 100%;
    overflow-y: auto;
    word-break: break-all;
    outline: none;
    user-select: text;
    white-space: pre-wrap;
	text-align: left;
	
	b {
		display: none;
	}

	&[contenteditable="true"] {
		&:empty:before {
			content: attr(placeholder);
			display: block;
			color: #999999;
		}
	}
}
</style>